<script setup lang="ts">
import Menu from '@/components/Menu.vue';
import { useRoute } from 'vue-router'
import { onMounted, ref, watch } from 'vue';

const isCollapse = ref(false);

const route = useRoute()
const pathList = ref()
 
const getCurrentPath = () => {
    pathList.value = route.matched.filter(item => item.meta && item.meta.title);
}
 
onMounted(() => {
    getCurrentPath();
})
 
watch(route, (to, from) => {
    pathList.value = to.matched.filter(item => item.meta && item.meta.title);
}, { immediate: true });

</script>

<template>
    <div class="container">
        <div class="aside">
            <Menu v-model:isCollapse="isCollapse"></Menu>
        </div>
        <div class="body">
            <div class="header">
                <div class="icon" @click="isCollapse = !isCollapse" style="cursor:pointer;">
                    <el-icon v-if="isCollapse" size="40"><Expand /></el-icon>
                    <el-icon v-else size="40"><Fold /></el-icon>
                </div>
                <el-breadcrumb separator=">" class="breadcrumb">
                    <el-breadcrumb-item :to="item.path" v-for="item in pathList" :key="item.id">{{ item.meta.title }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="main">
                <RouterView />
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    display: flex;
    .aside {
        width: 200px;
        height: 100%;
    }
    .body {
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 100%;
        .header {
            height: 6%;
            display: flex;
            background-color: white;
            .icon {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 2%;
                margin-right: 2%;
            }
            .breadcrumb {
                display: flex;

            }
        }
        .main {
            height: 94%;
            background-color: #F5F8FD;
            padding: 2%;
        }
    }
}
</style>